<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">
    <el-row>
        <el-button type="primary" @click="order"  >下单</el-button>
    </el-row>

    <!--    <el-select v-model="value0" placeholder="请选择银行"  @change="changeBankSelect(value0)">-->
    <!--        <el-option-->
    <!--                v-for="item in banks"-->
    <!--                :key="item.value"-->
    <!--                :label="item.label"-->
    <!--                :value="item.value">-->
    <!--        </el-option>-->
    <!--    </el-select>-->

    <!--    <el-select v-model="value" clearable placeholder="请选择对应接口" @change="changeSelect(value0,value)" v-show="interfaceVisible">-->
    <!--        <el-option-->
    <!--                v-for="item in interfaces"-->
    <!--                :key="item.interface.code"-->
    <!--                :label="item.interface.msg"-->
    <!--                :value="item.interface.code">-->
    <!--        </el-option>-->
    <!--    </el-select>-->

    <!--    <el-dialog  @open="onOpen" @close="onCloseNB"-->
    <!--                title="提示"-->
    <!--                :visible.sync="dialogVisibleNB"-->
    <!--                width="30%"-->
    <!--                :before-close="handleClose">-->

    <!--        <el-form ref="elFormNB" :model="formDataNB" :rules="rulesNB" size="medium" label-width="100px">-->
    <!--            <el-form-item label="当前返回" prop="field105">-->
    <!--                <el-input  type="textarea" readonly :autosize="{minRows: 4, maxRows: 5}"-->
    <!--                           :style="{width: '100%'}" v-model="returnText"></el-input>-->
    <!--            </el-form-item>-->

    <!--            <el-form-item label="返回code码" prop="retCode">-->
    <!--                <el-input v-model="formDataNB.retCode" placeholder="请输入返回code码，比如0000，9999" clearable-->
    <!--                          :style="{width: '100%'}"></el-input>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="返回msg" prop="retMsg">-->
    <!--                <el-input v-model="formDataNB.retMsg" placeholder="请输入返回的注释" clearable :style="{width: '100%'}">-->
    <!--                </el-input>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="交易状态" prop="status">-->
    <!--                <el-input v-model="formDataNB.status" placeholder="0成功、2失败、-3关闭、11审核处理中" clearable :style="{width: '100%'}">-->
    <!--                </el-input>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="交易错误描述" prop="errDesc">-->
    <!--                <el-input v-model="formDataNB.errDesc" placeholder="交易错误描述" clearable :style="{width: '100%'}">-->
    <!--                </el-input>-->
    <!--            </el-form-item>-->

    <!--        </el-form>-->
    <!--        <div slot="footer">-->
    <!--            <el-button @click="closeNB">取消</el-button>-->
    <!--            <el-button type="submit" @click="handelConfirmNB(value0)">确定</el-button>-->
    <!--        </div>-->
    <!--    </el-dialog>-->

    <!--    <el-dialog  @open="onOpen" @close="onCloseCCB"-->
    <!--                title="提示"-->
    <!--                :visible.sync="dialogVisibleCCB"-->
    <!--                width="30%"-->
    <!--                :before-close="handleClose">-->

    <!--        <el-form ref="elFormCCB" :model="formDataCCB" :rules="rulesCCB" size="medium" label-width="100px">-->
    <!--            <el-form-item label="当前返回" prop="returnText">-->
    <!--                <el-input  type="textarea" readonly :autosize="{minRows: 4, maxRows: 5}"-->
    <!--                           :style="{width: '100%'}" v-model="returnText"></el-input>-->
    <!--            </el-form-item>-->

    <!--            <el-form-item label="返回code码" prop="returnCode">-->
    <!--                <el-input v-model="formDataCCB.returnCode" placeholder="请输入返回code码，比如0000，9999" clearable-->
    <!--                          :style="{width: '100%'}"></el-input>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="返回msg" prop="returnMsg">-->
    <!--                <el-input v-model="formDataCCB.returnMsg" placeholder="请输入返回的注释" clearable :style="{width: '100%'}">-->
    <!--                </el-input>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="交易状态" prop="status">-->
    <!--                <el-input v-model="formDataCCB.status" placeholder="2成功、5付款失败、" clearable :style="{width: '100%'}">-->
    <!--                </el-input>-->
    <!--            </el-form-item>-->

    <!--        </el-form>-->
    <!--        <div slot="footer">-->
    <!--            <el-button @click="closeCCB">取消</el-button>-->
    <!--            <el-button type="submit" @click="handelConfirmCCB(value0)">确定</el-button>-->
    <!--        </div>-->
    <!--    </el-dialog>-->

        <el-dialog  @open="onOpen" @close="onCloseSPDB"
                    title="等待付款页面"
                    :visible.sync="showdialog"
                    width="30%"
                    :before-close="handleClose">


            <div slot="footer">
                <el-button @click="closeSPDB">取消</el-button>
                <el-button type="submit" @click="handlepay(value0)">付款</el-button>
            </div>
        </el-dialog>

</div>


</body>

<script>
    var app = new Vue({
        el: "#app",
        inheritAttrs: false,
        components: {},
        props: [],
        data() {
            return {
                banks: [{
                    value: 'NB',
                    label: '宁波银行'
                }, {
                    value: 'CCB',
                    label: '建设银行'
                }, {
                    value: 'SPDB',
                    label: '浦发银行'
                }],
                showdialog:null,
                value: '',
                value0: '',
                formDataNB: {
                    interfaceName: this.value,
                    retCode: undefined,
                    retMsg: undefined,
                    status: undefined,
                    errDesc: undefined,
                },
                formDataCCB: {
                    interfaceName: this.value,
                    returnCode: undefined,
                    returnMsg: undefined,
                    status: undefined,
                },
                formDataSPDB: {
                    interfaceName: this.value,
                    status: undefined,
                    resultMsg: undefined,
                },
                returnText: '',
                dialogVisibleNB: false,
                dialogVisibleCCB: false,
                dialogVisibleSPDB: false,
                interfaceVisible: false,
                rulesNB: {
                    retCode: [{
                        required: true,
                        message: '请输入返回code码，比如0000，9999',
                        trigger: 'blur'
                    }
                        , {
                            pattern: '^\\d{4}$',
                            message: '请输入正确的返回code码',
                            trigger: 'blur'
                        }
                    ],
                    status: [],
                },
                rulesCCB: {
                    returnCode: [{
                        required: true,
                        message: '请输入返回code码，比如0000，9999',
                        trigger: 'blur'
                    }
                    ],
                    status: [{
                        required: true,
                        message: '请输入状态码',
                        trigger: 'blur'
                    }, {
                        pattern: '^\\d{1}$',
                        message: '请输入正确的状态码',
                        trigger: 'blur'
                    }
                    ]
                },
                rulesSPDB: {
                    returnCode: [{
                        required: true,
                        message: '请输入返回code码，比如0000，9999',
                        trigger: 'blur'
                    }
                    ],
                    status: [{
                        required: true,
                        message: '请输入状态码',
                        trigger: 'blur'
                    }, {
                        pattern: '^\\d{1}$',
                        message: '请输入正确的状态码',
                        trigger: 'blur'
                    }
                    ]
                },
                interfaces: []

            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            _this = this;
        },
        methods: {
            onOpen() {
            },
            onCloseNB() {
                this.$refs['elFormNB'].resetFields()
            },
            onCloseCCB() {
                this.$refs['elFormCCB'].resetFields()
            },
            onCloseSPDB() {
                this.$refs['elFormSPDB'].resetFields()
            },
            closeNB() {
                this.dialogVisibleNB = false
                this.$refs['elFormNB'].resetFields()
            },
            closeCCB() {
                this.dialogVisibleCCB = false
                this.$refs['elFormCCB'].resetFields()
            },
            closeSPDB() {
                this.showdialog = false
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            changeSelect(value0, value) {
                console.log(value);
                console.log(value0);
                if ("NB" == value0 && "" != value) {

                    axios.get('/nbbank/getReturnText/' + value).then(function (response) {
                        console.log(response);
                        _this.returnText = response.data.model;
                        _this.formDataNB.interfaceName = _this.value;
                        _this.dialogVisibleNB = true;
                        _this.formDataNB.retCode = null;
                        _this.formDataNB.retMsg = null;
                        _this.formDataNB.status = null;
                        _this.formDataNB.errDesc = null;
                    }).catch(function (error) {
                        console.log(error);
                    });
                } else if ("CCB" == value0 && "" != value) {
                    axios.get('/bank-ccb-front/getReturnText/ccb' + value).then(function (response) {
                        console.log(response);
                        _this.returnText = response.data.model;
                        _this.formDataCCB.interfaceName = _this.value;
                        _this.dialogVisibleCCB = true;
                        _this.formDataCCB.returnCode = JSON.parse(_this.returnText).returnCode;
                        _this.formDataCCB.returnMsg = JSON.parse(_this.returnText).returnMsg;
                        _this.formDataCCB.status = JSON.parse(_this.returnText).status;

                    }).catch(function (error) {
                        console.log(error);
                    });

                } else if ("SPDB" == value0 && "" != value) {
                    axios.get('/bank-front/getReturnText/spdb' + value).then(function (response) {
                        console.log(response);
                        _this.returnText = response.data.model;
                        _this.formDataSPDB.interfaceName = _this.value;
                        _this.dialogVisibleSPDB = true;
                        _this.formDataSPDB.status = JSON.parse(_this.returnText).status;
                        _this.formDataSPDB.resultMsg = JSON.parse(_this.returnText).resultMsg;

                    }).catch(function (error) {
                        console.log(error);
                    });

                }

            },
            order(){
                this.showdialog=true;
            },
            changeBankSelect(value) {
                console.log(value);

                _this.interfaceVisible = true;
                axios({
                    method: 'post',
                    url: '/getInterface',
                    data: {'bank': value}
                }).then(function (response) {
                    console.log(response);
                    _this.interfaces = response.data.model;
                    _this.value = '';
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handlepay(vaule){
                axios({
                    method: 'post',
                    url: '/pay',
                    data: _this.formDataCCB
                }).then(function (response) {
                    console.log(response);
                    if ("0000" == response.data.respCode) {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                    } else {
                        _this.$message.error('跳转到用户历史账单中查看因付款超时而取消的订单');
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            handelConfirmNB(value) {
                this.$refs['elFormNB'].validate(valid => {
                    if (valid) {
                        console.log("success submit!!");
                        axios({
                            method: 'post',
                            url: '/nbbank/setParam',
                            data: _this.formDataNB
                        }).then(function (response) {
                            console.log(response);
                            if ("0000" == response.data.respCode) {
                                _this.dialogVisibleNB = false;
                                _this.$message({
                                    message: response.data.respMsg,
                                    type: 'success'
                                });
                            } else {
                                _this.$message({
                                    message: '恭喜你，修改成功',
                                    type: 'success'
                                });
                            }

                        }).catch(function (error) {
                            console.log(error);
                        });


                    } else {
                        console.log("error submit!!");
                    }
                });
            },
            handelConfirmCCB(value) {
                this.$refs['elFormCCB'].validate(valid => {
                    if (valid) {
                        console.log("success submit!!");
                        axios({
                            method: 'post',
                            url: '/bank-ccb-front/setParam',
                            data: _this.formDataCCB
                        }).then(function (response) {
                            console.log(response);
                            if ("0000" == response.data.respCode) {
                                _this.dialogVisibleCCB = false;
                                _this.$message({
                                    message: response.data.respMsg,
                                    type: 'success'
                                });
                            } else {
                                _this.$message({
                                    message: '恭喜你，修改成功',
                                    type: 'success'
                                });
                            }

                        }).catch(function (error) {
                            console.log(error);
                        });


                    } else {
                        console.log("error submit!!");
                    }
                });
            },
            handelConfirmSPDB(value) {
                this.$refs['elFormSPDB'].validate(valid => {
                    if (valid) {
                        console.log("success submit!!");
                        axios({
                            method: 'post',
                            url: '/bank-front/setParam',
                            data: _this.formDataSPDB
                        }).then(function (response) {
                            console.log(response);
                            if ("0000" == response.data.respCode) {
                                _this.dialogVisibleSPDB = false;
                                _this.$message({
                                    message: response.data.respMsg,
                                    type: 'success'
                                });
                            } else {
                                _this.$message({
                                    message: '恭喜你，修改成功',
                                    type: 'success'
                                });
                            }

                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        console.log("error submit!!");
                    }
                });
            },
        }
    });


</script>
</html>
